<template>
  <v-layout type="main">
    <!-- <p class="page-title">仿真环境</p>
    <div class="detail-box" v-if="detailData">
      <div class="pic">
        <v-image class="avatar" :src="detailData.avatar ? detailData.avatar : require('@/assets/img/drone3.jpg')"
          alt="" />
      </div>
      <div class="word">
        <h3 class="title">
          <i class="el-icon-edit-outline alick-btn-edit" @click="updateBase" />
          <el-button class="back" type="text" icon="el-icon-right" @click="$router.push({ path: '/gameimage' })" />
        </h3>
        <p class="hint" :title="detailData.desc">{{ detailData.desc }}</p>
      </div>
    </div> -->

    <div class="detail-box">
      <div class="rollback" @click="$router.push('/gameimage')">
        <img src="~@/assets/img/prev.png" alt="">
        <span>返回</span>
      </div>

      <div class="code-description">
        <div class="code-desc-header">
          <div class="title">
            <div class="title-header">
              <span>{{ detailData.name }}</span>
              <!-- <i class="el-icon-edit-outline alick-btn-edit" @click="updateBase" /> -->
            </div>

            <div class="code-tags">
              <div class="user-tag tag">
                <img src="~@/assets/img/user.png" alt="">
                {{
                  detailData.create_user && (detailData.create_user.nick_name ||
                    detailData.create_user.username)
                }}
              </div>

              <div class="time-tag tag">
                <span>开始时间：</span>
                {{ detailData.create_time }}
              </div>

              <div class="time-tag tag">
                <span>更新时间：</span>
                {{ detailData.update_time }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div :class="['layout-content', { 'layout-content-nodetail': $route.meta.hideDetails }]">
      <router-view class="content-detail" :detailData.sync="detailData" v-if="detailData" @getDetail="getDetail" />
    </div>

    <el-dialog :visible.sync="showUpdateBaseDialog" title="仿真环境基本信息" width="840px">
      <el-form class="form myself-form" ref="form" :rules="submitRules" :model="formData" label-width="120px">
        <el-form-item label="名称" prop="name">
          <el-input type="text" v-model="formData.name" />
        </el-form-item>
        <el-form-item label="配图">
          <media-uploader accept=".jpg,.jpeg,.png,.JPG,.JPEG" :src="formData.avatar" @avatarPath="avatarPath" />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input type="textarea" :rows="3" v-model="formData.desc" />
        </el-form-item>
        <el-form-item label=" ">
          <el-button class="none-type" type="primary" @click="commitBase">确定</el-button>
          <el-button class="none-type" @click="cancelBase">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </v-layout>
</template>

<script>
// import plugState from '@/components/module/plug-state'
import { getImageDetail, putImage } from '@/api/image'
export default {
  data() {
    return {
      nowRouter: this.$route.name,
      thisRouter: [],
      // detailData: null,
      detailData: {
        name: "tftest01", create_user: { start_time: '2023-09-08 15:23:10', nick_name: "tftest" }, status: 'terminated', desc: "描述信息",
        command: "command", scenario_dir: "", url: "", product: { name: "" },
      },
      formData: {},
      showUpdateBaseDialog: false,
      submitRules: {
        name: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 1, max: 40, message: "长度在1到40个字符" },
        ],
        desc: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 1, max: 200, message: "长度在1到200个字符" },
        ],
        command: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 1, max: 1000, message: "长度在1到1000个字符" },
        ],
        scenario_dir: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 1, max: 65535, message: "想定挂载地址" },
        ],
        url: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 1, max: 65535, message: "镜像地址" },
        ],
      },
    };
  },
  methods: {
    skip() {
      let path = `/gameimage/${this.thisRouter.filter(e => e.name == this.nowRouter)[0].path}`
      if (path == this.$route.path) return
      this.$router.push({
        path,
        query: {
          id: this.$route.query.id
        }
      })
    },
    async getDetail() {
      if (this.$route.query.id) {
        console.log('id', this.$route.query.id)
        let res = await getImageDetail({ id: this.$route.query.id })
        this.detailData = res.data
        this.formData = JSON.parse(JSON.stringify(this.detailData))
      }
    },
    avatarPath(data) {
      this.formData.avatar = data;
    },
    updateBase() {
      this.showUpdateBaseDialog = true
    },

    commitBase() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let res = await putImage(this.formData);
          if (res && res.data) {
            this.getDetail()
            this.showUpdateBaseDialog = false
          }
        }
      })
    },
    cancelBase() {
      this.showUpdateBaseDialog = false
    },
  },
  components: {
    // plugState,
  },
  mounted() {
    let temp = this.$router.options.routes.filter(
      e => e.name == 'gameimage' && e.children
    )
    this.thisRouter = temp[0].children.filter(e => !e.meta.hideDetails)
    this.getDetail()
  },

  destroyed() {

  },
}
</script>
<style lang="less" scoped>
@import "~@/assets/css/detail-layout.less";
</style>